﻿<div class="x-nav">
    <span class="layui-breadcrumb">
        <a><cite>首页</cite></a>
        <a><cite>商品管理</cite></a>
        <a><cite>商品分类列表</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

<div style="margin-top: 50px;margin-bottom:100px">

    <!--onsubmit="return false":禁止form提交数据-->
    <form class="layui-form" onsubmit="return false">
        <div class="layui-form-item">
            <!--用户名-->
            <label class="layui-form-label">分类名称</label>
            <div class="layui-input-inline">
                <input type="text" id="Name" class="layui-input" />
            </div>
            <!--点击搜索，重新加载了一次表格reload-->
            <button id="search" data-type="reload" class="layui-btn">搜索</button>
        </div>
    </form>
    <button class="layui-btn" id="create">新建分类</button>
    <table id="my_table" lay-filter="mjf"></table>
    <!--顶部工具栏-->
    @*<script type="text/html" id="top_tool">

    </script>*@
    <!--行内工具-->
    <script type="text/html" id="inline_tool">
        <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</button>
    </script>
</div>

<style>
    .layui-table-cell {
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }
</style>
@section Scripts{
    <script>
        //function dateToStr(date) {
        //    date.replace(/Date\([\d+]+\)/, function (a) { eval('d = new ' + a) });
        //    return d.format("yyyy-MM-dd hh:mm:ss");
        //}
        layui.use(['table'], function () {
            var table = layui.table;
            var $ = layui.$;
            var layer = layui.layer;
            table.render({
                elem: "#my_table",
                url: "list", //请求地址
                method: "get", //请求方式
                toolbar: "#top_tool", //挂载上顶部工具栏
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                page: true, //是否开启分页limit：每页数据条数 page：当前第几页
                where: {

                },
                cols: [[{
                    type: 'checkbox'
                }, {
                    field: 'id',
                    title: '编号',
                }, {
                    field: 'name',
                    title: '分类名称'
                }, {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#inline_tool'
                }]]
            });

            ////搜索

            $("#search").click(function () {
                var Name = $("#Name").val();
                table.reload("my_table", {
                    where: {
                        Name: Name,
                    }
                });
                return false;
            });
            //var active = {
            //    reload: function () {
            //        //重新加载哪个表格
            //        table.reload('my_table', {
            //            where: {
            //                Name: $("#Name").val(),
            //            }
            //        })
            //    }
            //};
            ////点击谁的时候重载表格
            //$("#search").click(function () {
            //    //点击搜索的时候重新加载表格
            //    var type = $(this).data('type'); //获取此按钮的data-type
            //    //如果type不为空，点击此按钮进行重新加载
            //    active[type] ? active[type].call(this) : '';
            //});
            //监听顶部工具栏的点击

            $("#create").click(function () {
                layer.open({
                    type: 2,
                    area: ['600px', '500px'],
                    content: 'Add' //这里content是一个普通的String
                });
            });
            //table.on('toolbar(mjf)', function (obj) {

            //    if (obj.event == "create") {
            //        //创建用户 message缩写，信息的意思
            //        layer.open({
            //            type: 2,
            //            area: ['800px', '750px'],
            //            content: 'AddProductType' //这里content是一个普通的String
            //        });
            //    }
            //});
            //监听行内工具点击
            table.on('tool(mjf)', function (obj) {
                console.log(obj);
                //拿这一行的数据
                var data = obj.data;
                if (obj.event == "edit") {
                    layer.open({
                        type: 2,
                        area: ['600px', '600px'],
                        content: 'Edit?Id=' + data.id //这里content是一个普通的String
                    });
                } else if (obj.event == "del") {
                    layer.confirm("真的删除吗？", function (index) {
                        //点击确定的时候执行删除，ajax请求不跳转
                        $.ajax({
                            url: "DelProductType",
                            type: "post",
                            dataType: "json",
                            data: {
                                Id: data.id
                            },
                            success: function (res) {
                                //删除成功，关闭当前弹窗
                                if (res.success == true) {
                                    //关闭弹窗并刷新列表
                                    layer.close(index);

                                    location.reload();
                                } else {
                                    layer.msg(res.msg)
                                }
                            },
                            error: function (e) {
                                console.log(e);
                            }
                        })

                    });
                }
            });

        });
    </script>
}
